<template>
  <div class="song-list">
    <el-table :data="songs" stripe>
      <el-table-column label="" width="80">
        <template #default="{ $index }">
          <el-button 
            circle
            @click="handlePlay(songs[$index])"
          >
            <el-icon><VideoPlay /></el-icon>
          </el-button>
        </template>
      </el-table-column>
      
      <el-table-column label="歌曲">
        <template #default="{ row }">
          <div class="song-info">
            <img v-if="row.picUrl" :src="row.picUrl" :alt="row.name">
            <span>{{ row.name }}</span>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="歌手">
        <template #default="{ row }">
          <router-link 
            v-for="artist in row.artists" 
            :key="artist.id"
            :to="`/artist/${artist.id}`"
            class="artist-link"
          >
            {{ artist.name }}
          </router-link>
        </template>
      </el-table-column>
      
      <el-table-column label="专辑" v-if="showAlbum">
        <template #default="{ row }">
          <router-link 
            v-if="row.album"
            :to="`/album/${row.album.id}`"
            class="album-link"
          >
            {{ row.album.name }}
          </router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { usePlayerStore } from '@/stores/player'
import type { SongInfo } from '@/types'

const props = defineProps<{
  songs: SongInfo[]
  showAlbum?: boolean
}>()

const playerStore = usePlayerStore()

const handlePlay = (song: SongInfo) => {
  playerStore.playSong(song)
}
</script>

<style scoped lang="scss">
.song-list {
  .song-info {
    display: flex;
    align-items: center;
    gap: 10px;
    
    img {
      width: 40px;
      height: 40px;
      border-radius: 4px;
    }
  }
  
  .artist-link,
  .album-link {
    color: #666;
    text-decoration: none;
    
    &:hover {
      color: #409EFF;
    }
    
    & + .artist-link {
      margin-left: 8px;
      
      &:before {
        content: '/';
        margin-right: 8px;
        color: #999;
      }
    }
  }
}
</style> 